<template>
	<view>
		<view class="cu-content" v-for="(item,index) in myLineInfo" :key="index" >
			<view class=" mainTitle" style="background-color: #89C8E5;color: #F6F2F3;">
				<span  >车辆排队信息：</span>
			</view>
			<view class="cu-card card "  >
				<view class="text-content ">
					<view class="flex justify-between">
						<view style="flex:1;">
							<text class="blurText" >排队号：</text>
							<text class="redText" > {{item.QueueUpNO}}</text>
						</view>
						<view >当前排队
							<text class="redText padding" >{{item.QueueNumber}}</text>
							位
						</view>
					</view>
				</view>
				<view class="text-content ">
					<view class="flex justify-between">
						<view style="flex:1;">
							<text class="blurText" >车牌号：</text>
							<text class="redText" > {{item.LicensePlateNO}}</text>
						</view>
						<view >
							<text class="blurText" >当前卸货仓库：</text>
							<text class="redText" > {{item.WarehouseNO}}</text>
						</view>
					</view>
				</view>
				<view class="text-content">
					<view class="flex justify-between">
						<view style="flex:1;">
							<text class="blurText" >仓库联系 ：</text>
							<text class="redText" > {{item.WarehouseNOContactInfor}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="item.QueueMessage">
				<view class=" mainTitle" style="background-color: #E4C390;color: #F6F2F3;">
					<span  >过港入区信息：</span>
				</view>
				<view  class="cu-card card flex align-center" style="height: 80px;align-items: center;" >
					<view v-html="item.QueueMessage"></view>
				</view>
			</view>
			<view  class="padding flex flex-direction">
				<button class=" bg-gradual-orange " @click="quickyGo(item.WarehouseID)">快速导航</button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				session:{},
				myLineInfo:[
					{
						LicensePlateNO:'',
						QueueMessage:'',
						QueueNumber:'',
						QueueUpNO:'',
						WarehouseNO:'',
						WarehouseNOContactInfor:'',
					}
				],
				// cesi:"<h1>这是一个h1元素内容</h1>"
				// tesi:'你已经被允许通过请在 <span style="color:red">30分钟</span> 内过港卸货请至 <span style="color:red">4号库</span> 卸货'
			}
		},
		mounted() {
			this.session = uni.getStorageSync('session') || {};
			this.getMyLineUp();
		},
		methods: {
			quickyGo(id){
				// let id=this.myLineInfo.WarehouseID||1
				uni.navigateTo({
					url:`/pages/home/navigation?markerId=${id}`
				})
			},
			getMyLineUp(){
				uni.showLoading({
				    title: '加载中'
				});
				this.$store.dispatch('uni/GetCurrentQueueUpInfo',{
					openid:this.session.openid,
					// openid:'oAzx55IhgiAtvf4-DkHvmjXewCH8',
					})
				.then(res=>{
					console.log('res==',res)
					this.myLineInfo=res.Data
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				});
			}
		}
	}
</script>

<style lang="scss" scoped >
	.cu-content{
		background-color:#FFFFFF;
		border: 1px solid #fff;
		border-radius: 5px;
		margin: 10px;
	}
	.mainTitle{
		font-size: 16px;
		margin: 20px 10px -6px 10px;
		border-radius: 5px;
		height: 30px;
		line-height: 30px;
		width: 130px;
		padding-left: 10px;
	}
	.card{
		border-radius: 5px;
		margin: 0px 10px 10px 10px;
		padding: 10px;
	}
	.text-content{
		padding: 10px;
		line-height: 40px;
		height: 40px;
	}
	.redText{
		color: red;
	}
</style>
